Framework7 এর Layouts ব্যবস্থাপনা

Framework7 একটি অত্যন্ত কার্যকর ফ্রেমওয়ার্ক যা মোবাইল এবং ওয়েব অ্যাপ্লিকেশনের জন্য সহজ এবং সাশ্রয়ী লেআউট ডিজাইন করতে সাহায্য করে। এটি গ্রিড সিস্টেম, ফ্লেক্সবক্স (Flexbox) এবং রেসপন্সিভ ডিজাইন এর মতো অত্যাধুনিক টুলস সরবরাহ করে, যা ডেভেলপারদের দ্রুত লেআউট তৈরি করতে সহায়ক।

১. Framework7 Layouts এর মূল ধারণা

Framework7 Layouts হলো বিভিন্ন UI উপাদানের কাঠামো তৈরির একটি পদ্ধতি যা ব্যবহারকারীদের জন্য নেভিগেশন এবং কন্টেন্ট উপস্থাপনকে সহজ করে। Framework7 ডিফল্টভাবে বেশ কিছু লেআউট সাপোর্ট করে, যেমন:

• Single View Layout
• Split View Layout (ডেস্কটপ এবং ট্যাবলেটের জন্য)
• Tabs Layout
• Master-Detail Layout

২. Framework7 এর গ্রিড সিস্টেম

Framework7 এর গ্রিড সিস্টেম অত্যন্ত ফ্লেক্সিবল এবং রেসপন্সিভ। এটি ফ্লেক্সবক্সের উপর ভিত্তি করে তৈরি, যা উপাদানগুলোর লেআউট সহজে পরিচালনা করে।

গ্রিড সিস্টেমের মূল বৈশিষ্ট্য:

1. Row এবং Column ব্যবহার: লেআউট তৈরির জন্য row এবং col ব্যবহার করা হয়।
2. রেসপন্সিভ: বিভিন্ন স্ক্রিন সাইজ অনুযায়ী লেআউট পরিবর্তন করা যায়।
3. এলিমেন্ট স্পেসিং: gap ব্যবহার করে গ্রিডের মধ্যে ফাঁক তৈরি করা যায়।

উদাহরণ: Simple Grid Layout

<div class="row">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
  <div class="col">Column 3</div>
</div>

রেসপন্সিভ গ্রিড উদাহরণ:

<div class="row">
  <div class="col-50">50% Width</div>
  <div class="col-50">50% Width</div>
</div>

<div class="row">
  <div class="col-100">100% Width on Mobile</div>
  <div class="col-25">25% Width</div>
  <div class="col-75">75% Width</div>
</div>

৩. Flexbox Layout ব্যবহারের সুবিধা

Flexbox Framework7 এর লেআউট সিস্টেমের একটি গুরুত্বপূর্ণ অংশ। এটি উপাদানগুলোর অবস্থান এবং সাইজ ডাইনামিক্যালি নিয়ন্ত্রণ করতে ব্যবহৃত হয়।

Flexbox উদাহরণ:

<div class="row justify-content-center align-items-center">
  <div class="col">Centered Column 1</div>
  <div class="col">Centered Column 2</div>
</div>

প্রধান ক্লাসসমূহ:

• justify-content-start, justify-content-center, justify-content-end
• align-items-start, align-items-center, align-items-end

৪. Split View Layout (ডেস্কটপ ও ট্যাবলেটের জন্য)

Split View Layout ডেস্কটপ এবং ট্যাবলেট অ্যাপ্লিকেশনের জন্য উপযুক্ত, যেখানে নেভিগেশন প্যানেল এবং প্রধান কন্টেন্ট এলাকা পাশাপাশি থাকে।

উদাহরণ:

<div class="view view-left"> 
  <div class="page">
    <div class="page-content">
      <p>Left Panel Content</p>
    </div>
  </div>
</div>

<div class="view view-main">
  <div class="page">
    <div class="page-content">
      <p>Main Content Area</p>
    </div>
  </div>
</div>

৫. Tabs Layout

Tabs Layout এমন লেআউট যেখানে বিভিন্ন কন্টেন্ট ট্যাবে সাজানো থাকে এবং ব্যবহারকারী ট্যাবের মাধ্যমে বিভিন্ন পৃষ্ঠা দেখতে পারে।

Tabs Layout উদাহরণ:

<div class="tabs">
  <div id="tab1" class="page-content tab tab-active">
    <p>Tab 1 Content</p>
  </div>
  <div id="tab2" class="page-content tab">
    <p>Tab 2 Content</p>
  </div>
</div>

<div class="toolbar tabbar">
  <div class="toolbar-inner">
    <a href="#tab1" class="tab-link tab-link-active">Tab 1</a>
    <a href="#tab2" class="tab-link">Tab 2</a>
  </div>
</div>

৬. Master-Detail Layout

Master-Detail Layout মোবাইল এবং ডেস্কটপ উভয় প্ল্যাটফর্মে ব্যবহৃত হয়, যেখানে একটি লিস্ট (মাস্টার) এবং একটি বিস্তারিত পৃষ্ঠা (ডিটেইল) একসাথে কাজ করে।

Master-Detail উদাহরণ:

<div class="view view-main master-detail-master">
  <div class="page">
    <div class="page-content">
      <ul>
        <li><a href="/detail-page1/">Detail 1</a></li>
        <li><a href="/detail-page2/">Detail 2</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="view view-detail master-detail-detail">
  <div class="page">
    <div class="page-content">
      <p>Detail Page Content</p>
    </div>
  </div>
</div>

৭. Framework7 Layouts এর সাথে রেসপন্সিভ স্ট্রাটেজি

Framework7 এর মিডিয়া কোয়ারিজ এবং CSS ক্লাস ব্যবহার করে রেসপন্সিভ লেআউট তৈরি করা যায়।

CSS মিডিয়া কোয়ারিজ উদাহরণ:

@media (max-width: 768px) {
  .col {
    width: 100%;
  }
}

Framework7 এর রেসপন্সিভ ক্লাস:

• col-auto: উপাদানের সাইজ কনটেন্ট অনুযায়ী হয়।
• col-50: উপাদানের সাইজ স্ক্রিনের ৫০%।
• hidden-md: নির্দিষ্ট স্ক্রিন সাইজে উপাদান লুকানো হয়।

Framework7 এর Layouts ব্যবস্থাপনা অত্যন্ত শক্তিশালী, যা মোবাইল এবং ওয়েব অ্যাপ্লিকেশনের জন্য সহজে রেসপন্সিভ এবং ফ্লেক্সিবল লেআউট তৈরি করতে সাহায্য করে। গ্রিড সিস্টেম, ফ্লেক্সবক্স, এবং ডিফল্ট লেআউট গুলো ব্যবহার করে আপনি দ্রুত এবং দক্ষতার সাথে একটি ইউজার-ফ্রেন্ডলি অ্যাপ তৈরি করতে পারবেন।